import React, { useEffect, useState } from 'react';
import { Card, Toast, Button, NavBar, Input, Loading } from 'antd-mobile';
import { OutsideBox } from '@/components/style';
import styles from './style.less';
import { dataList } from './data';

const personal = () => {
  const [value, setValue] = useState<string>();
  const [val, setVal] = useState<number>();
  useEffect(() => {
    console.log(value);
  }, [value]);
  const List = () => {
    // TODO 点击改变当前样式
    return (
      dataList &&
      dataList.map((item) => {
        return (
          <div
            key={item.id}
            className={`${
              item.id === val ? styles.contextBox : styles.context_Box
            } ${styles.contextBox_}`}
            onClick={() => setVal(item.id)}
          >
            <div>{item.title}</div>
            <div>{item.name}</div>
          </div>
        );
      })
    );
  };
  return (
    <>
      <NavBar back={null}>
        <div>我的申请</div>
      </NavBar>
      <div className={styles.box}>
        <div className={styles.outInputBox}>
          <div className={styles.inputBox}>
            <Input
              placeholder="请输入医院名称"
              value={value}
              onChange={(val) => {
                setValue(val);
              }}
              clearable
            />
          </div>
        </div>
      </div>
      <div className={styles.contextDom}>{List()}</div>
    </>
  );
};
export default personal;
